<template>
    <div>
        <Button type="primary" @click="onAdd">添加</Button>
        <Button type="primary" @click='deletes'>删除</Button>
        <Input v-model="searchValue" class='searchInput'>
            <Button type="primary" slot="append" icon="ios-search" @click="onSearch">搜索</Button>
        </Input>
        <Table border :columns="columns7" :data="data6" @on-selection-change="onSelectionChange"></Table>
        <Page :total="pageCount" :page-size="pageSize" show-sizer show-elevator show-total 
                        @on-change="change" @on-page-size-change="changePage"></Page>
        <Modal v-model="modal1" title="添加评论">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="50">
                <FormItem label="网友" prop="appraiser">
                    <Input type="text" v-model="formValidate.appraiser"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <vue-editor v-model="formValidate.content"></vue-editor>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div> 
</template>
<script>
    import { VueEditor } from 'vue2-editor';
    import {msgLine} from "../../main.js"
    export default {
        components: {
            VueEditor
        },
        data () {
            return {
                pageCount:0,
                pageSize:10,
                history:[],
                ids:[],
                searchValue:'',
                newId:'',
                columns7: [
                    {
                        type: 'selection',
                        width:60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        title:'序号',
                        width:65,
                        align: 'center'
                    },
                    {
                        title: '网友',
                        key: 'appraiser',
                        width:100,
                        align: 'center'
                    },
                    {
                        title: '内容',
                        key: 'content',
                        align: 'center'
                    },
                    {
                        title: '评论时间',
                        width:150,
                        key: 'commentTime',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type:'warning'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onUpdate(params.row);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type:'error'
                                    },
                                    on: {
                                        click: () => {
                                            this.confirm(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: [],
                modal1: false,
                formValidate: {
                   appraiser:'',
                   content:'',
                   _id:'',
                   articleId:'',
                },
                ruleValidate: {
                    appraiser: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            deletes(){
                if(this.ids.length>0){
                    this.$Modal.confirm({
                        title: '警告！',
                        content: '<p>你确定要删除该评论吗</p>',
                        onOk: () => {
                            this.$http.post('http://localhost:3000/comment/deletes',{idarr:this.ids.toString()})
                            .then(res=>{
                                this.$Message.info("删除数据成功");
                                this.getData();
                            })
                        }
                    });
                }else{
                    this.$Modal.warning({title: "警告！",content:"请选择要删除的数据!"});
                }
            },
            confirm (index) {
                this.$Modal.confirm({
                    title: '警告！',
                    content: '<p>你确定要删除该评论吗</p>',
                    onOk: () => {
                        var deleteUrl='http://localhost:3000/comment/data/'+this.data6[index]._id;
                        this.$http.delete(deleteUrl)
                        .then(res=>{
                            this.getData();
                        })
                    }
                });
            },
            change(index){
                var _start = ( index - 1 ) * this.pageSize;
                var _end = index * this.pageSize;
                this.data6 = this.history.slice(_start,_end);
            },
            changePage(q){
                this.pageSize=q;
                 this.data6 = this.history.slice(0,this.pageSize);
            },
            onUpdate(row){
                this.modal1=true;
                Object.assign(this.$data.formValidate,row);
            },
            onSearch(){
                this.$http.post('http://localhost:3000/comment/list/',{content:this.searchValue})
                .then(res=>{
                    this.pageCount=res.data.rows.length;
                    this.history=res.data.rows;
                    this.data6 = this.history.slice(0,10);
                });
            },
            onAdd(){
               this.modal1=true;
               this.$data.formValidate={};
            },
            handleSubmit (name) {
                console.log(this.newId);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.formValidate.articleId=this.newId;
                        if(this.formValidate._id&&this.formValidate._id.length>0){
                            this.$http.put(`http://localhost:3000/comment/data/${this.formValidate._id}`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('修改成功!');
                                this.modal1=false;
                                this.getData();
                            })
                        }else{
                            this.$http.post('http://localhost:3000/comment/data',this.formValidate)
                            .then(res=>{
                                this.$Message.success('提交成功!');
                                this.modal1=false;
                                this.getData();
                            })
                        }
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getSelectedNodes(){
                return this.$refs.tree.getSelectedNodes();
            },
            onSelectionChange(selection){
                if(selection&&selection.length>0){
                    var ids=[];
                    let len=selection.length;
                    for(let i=0;i<len;i++){
                        ids.push(selection[i]._id);
                    }
                    this.ids=ids;
                }
            },
            deletes(){
                if(this.ids.length>0){
                    this.$Modal.confirm({
                        title: '警告！',
                        content: '<p>你确定要删除该用户吗</p>',
                        onOk: () => {
                            this.$http.post('http://localhost:3000/comment/deletes',{idarr:this.ids.toString()})
                            .then(res=>{
                                this.$Message.info("删除数据成功");
                                this.getData();
                            })
                        }
                    });
                }else{
                    this.$Modal.warning({title: "警告！",content:"请选择要删除的数据!"});
                }
            },
            getData(){
                this.$http.post('http://localhost:3000/comment/list/',{articleId:this.newId})
                .then(res=>{
                    this.pageCount=res.data.rows.length;
                    this.history=res.data.rows;
                    this.data6 = this.history.slice(0,10);
                });
            }
        },
        created(){
            this.newId=this.$route.params.id;
            // console.log(this.newId);
            // msgLine.$on('changePage',(row)=>{
            //     this.newId=row._id;
            // });
            this.getData();
        }
    }
</script>
<style>
.searchInput{
    float:left;
    width:300px;
}
</style>
